<template>
  <div class="merchant-detail-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <!--      <el-breadcrumb separator-class="el-icon-arrow-right">-->
      <!--        <el-breadcrumb-item>商家管理</el-breadcrumb-item>-->
      <!--        <el-breadcrumb-item>商家详情</el-breadcrumb-item>-->
      <!--      </el-breadcrumb>-->
      <div class="action-buttons">
        <!--        <el-button type="primary" icon="el-icon-edit" @click="handleEdit">编辑</el-button>-->
        <!--        <el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>-->
      </div>
    </div>

    <!-- 商家基本信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>商家基本信息</span>
          <el-tag :type="getStatusType(dataInfo.type)">{{ dataInfo.type || '未知状态' }}</el-tag>
        </div>
      </template>

      <!-- 商家头像 -->
      <div class="merchant-avatar" @click="showAvatarDialog">
        <el-avatar
          :size="120"
          :src="dataInfo.avatarUrl || defaultAvatar"
          :shape="avatarShape"
          :icon="avatarIcon"
        >
        </el-avatar>
        <span v-if="!dataInfo.avatarUrl" class="avatar-placeholder">点击上传头像</span>
      </div>

      <div class="basic-info">
        <div class="info-row">
          <div class="info-item">
            <span class="item-label">商家名称：</span>
            <span class="item-value">{{ dataInfo.businessName || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">法定代表人：</span>
            <span class="item-value">{{ dataInfo.legalRepresentativeName || '-' }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="item-label">联系电话：</span>
            <span class="item-value">{{ dataInfo.phoneNumber || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">电子邮箱：</span>
            <span class="item-value">{{ dataInfo.merchantEmail || '-' }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="item-label">经营范围：</span>
            <span class="item-value">{{ dataInfo.businessActivities || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">注册资本：</span>
            <span class="item-value">{{ dataInfo.registeredCapital || 0 }} 万元</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 商家资质信息卡片 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <span>商家资质信息</span>
      </template>

      <div class="qualification-info">
        <div class="info-row">
          <div class="info-item">
            <span class="item-label">身份证号：</span>
            <span class="item-value">{{ formatIdCard(dataInfo.idCardNumber) || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">营业执照号：</span>
            <span class="item-value">{{ dataInfo.registrationNumber || '-' }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="item-label">执照有效期：</span>
            <span class="item-value">{{ dataInfo.registrationNumberDate || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">商家地址：</span>
            <span class="item-value">{{ dataInfo.address || '-' }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 商家业务信息标签页 -->
    <el-tabs v-model="activeTab" class="tab-container">
      <el-tab-pane label="交易记录" name="transactions">
        <merchant-transactions :id="id"/>
      </el-tab-pane>

      <el-tab-pane label="商品信息" name="products">
        <products :id="id"/>
      </el-tab-pane>

      <el-tab-pane label="评价信息" name="reviews">
        <EvaluationManagement :id="id"/>
      </el-tab-pane>
    </el-tabs>


    <el-dialog :visible.sync="avatarDialogVisible" title="商家头像">
      <template #content>
        <div class="avatar-preview">
          <img :src="dataInfo.avatarUrl || defaultAvatar" alt="商家头像" class="preview-image">
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="avatarDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getInfoMerchan } from '@/api/list/products'
import Products from '@/views/list/products/products.vue'
import MerchantTransactions from './merchantTransactions.vue'
import EvaluationManagement from './EvaluationManagement.vue'

export default {
  name: 'MerchantDetail',
  components: {  EvaluationManagement, MerchantTransactions, Products },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      dataInfo: {},
      activeTab: 'transactions',

      loading: false,
      avatarDialogVisible: false,
      defaultAvatar: 'https://picsum.photos/200/200?random=1', // 默认头像
      avatarShape: 'circle', // 头像形状
      avatarIcon: 'el-icon-user' // 无头像时显示的图标
    }
  },
  watch: {
    id(newVal) {
      if (newVal) this.fetchData()
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      Promise.all([
        this.getMerchantInfo()
      ]).finally(() => {
        this.loading = false
      })
    },

    // 获取商家基本信息
    getMerchantInfo() {
      return getInfoMerchan(this.id)
        .then((response) => {
          this.dataInfo = response.data
        })
        .catch((error) => {
          this.$message.error('获取商家信息失败')
        })
    },
    // 格式化身份证号
    formatIdCard(idCard) {
      if (!idCard) return ''
      return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
    },

    // 获取商家状态标签类型
    getStatusType(status) {
      switch (status) {
        case '已过期':
          return 'danger'
        case '正常营业':
          return 'success'
        case '审核中':
          return 'info'
        case '已暂停':
          return 'warning'
        default:
          return 'info'
      }
    },
    // 显示头像预览对话框
    showAvatarDialog() {
      if (this.dataInfo.avatarUrl) {
        this.avatarDialogVisible = true
      } else {
        // 如果没有上传头像，跳转到编辑页面
        this.$message.info('请先上传商家头像')
        this.handleEdit()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.merchant-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.info-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.basic-info, .qualification-info {
  padding: 20px 0;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.info-item {
  flex: 1 1 calc(50% - 20px);
  min-width: 300px;
  display: flex;
  align-items: center;
}

.item-label {
  width: 120px;
  text-align: right;
  margin-right: 10px;
  color: #606266;
}

.item-value {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

.tab-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

/* 头像样式 */
.merchant-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;

  .avatar-placeholder {
    position: absolute;
    bottom: -20px;
    color: #606266;
    font-size: 12px;
  }

  .el-avatar {
    cursor: pointer;
    border: 2px solid #ebeef5;
    transition: all 0.3s;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  }
}

/* 头像预览样式 */
.avatar-preview {
  display: flex;
  justify-content: center;
  padding: 20px;

  .preview-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 4px;
  }
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-item {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 4px 8px;
}

.product-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.product-quantity {
  font-size: 12px;
  color: #8392a5;
  min-width: 24px;
  text-align: right;
}
</style>

